<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<!-- <view
					class="flex title justify-between"
					@click="() => (isCollapse = !isCollapse)">
					<text>点检项目</text>
					<u-icon
						v-show="!isCollapse && sopStandardId"
						name="arrow-up"
						color="#000a7b"></u-icon>
					<u-icon
						v-show="isCollapse && sopStandardId"
						name="arrow-down"
						color="#000a7b"></u-icon>
				</view>
				<view
					v-show="!sopStandardId"
					class="grey1-color flex justify-start"
					style="margin-bottom: 12px">
					暂无点检项目，请选择点检项目
				</view>
				<view class="record-item" v-show="sopStandardName">
					<text>点检项目</text>
					<text>{{ sopStandardName || "" }}</text>
				</view>

				<view v-show="!isCollapse && sopStandardId">
					<view v-show="sopStandardId">
						<text>指导书</text>
						<view>
							<u--image
								@click="imageListPreview()"
								class="StandardImage"
								:src="oneImages"></u--image>
						</view>
					</view>
				</view> -->
				
				<view v-show="sopStandardId">
					<view style="text-align: center;margin-top:4px;margin-bottom: 13px;font-weight: 600;font-size: 16px;">
						<text>{{sopStandardName || ""}}</text>
					</view>
					<view v-show="sopStandardId">
						<view>
							<u--image
								@click="imageListPreview()"
								class="StandardImage"
								:src="oneImages"></u--image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="DeviceInfoTemplate">
import { http } from "@/utils/http";
import UploadImage from "@/components/upload-image-ssr.vue";
import { ref } from "vue";
const props = defineProps({
	sopStandardId: {
		type: String,
		default: () => "",
	},
	sopStandardName: {
		type: String,
		default: () => "",
	},
});

const { sopStandardId, sopStandardName } = toRefs(props);
let images = ref([]);
watch(
	() => props.sopStandardId,
	async (newVal) => {
		getImages();
	}
	// {
	// 	deep: true,
	// 	immediate: true,
	// }
);

// 是否折叠
const isCollapse = ref(false);
// 获取指导书

let oneImages = ref("");
const uploadApi = process.env.VITE_APP_UPLOAD_API;
async function getImages() {
	// console.log(props.sopStandardId);
	images.value = [];
	const result = await http({
		method: "GET",
		url: `/eam/eamsopstandardimg/getList/${props.sopStandardId}`,
	});

	// images.value = result.data;
	// images.value = [];
	result.data.forEach((item) => {
		images.value.push(`${uploadApi}/system/fileCenter/preview/${item.url}`);
	});
	console.log("getImages", result.data);
	oneImages.value = images?.value[0];
}
console.log("zujian", props.sopStandardId);
if (props.sopStandardId) {
	getImages();
}

const imageListPreview = () => {
	console.log("1111", images.value);
	uni.previewImage({
		current: oneImages.value, // 当前显示图片的链接，默认是第一个
		urls: images.value, // 需要预览的图片链接列表
		indicator: "number", // 显示底部指示器
		loop: true, // 是否开启循环播放
	});
};
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}
.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
:deep(.StandardImage .u-image) {
	width: 100% !important;
}
:deep(.StandardImage .u-image__loading) {
	width: 100% !important;
}
</style>
